import React, { Component } from 'react';
import'./index.scss'
import { Button, Modal } from 'antd-mobile';
import { NavLink } from 'react-router-dom'
class Com extends Component {
  constructor(props){
    super(props)
    this.state = {
      username:'',
      password:'',
      flag: false ,
      isLogin: false
    }
  }

  // 输入框事件
  change(e){
    const val = e.target.value.trim()
    if(val){
      e.target.name === 'text' ? 
      this.setState({
        username : val
      })
      :
      this.setState({
        password : val
      })
    }
  }

  // 模态框显示用户信息
  modalDom () {
    return (
      <div style={{textIndent:"20px",fontSize:"13px",color:"#999999",height:"3.785rem",overflowY:"auto"}}>
        眼下这个年轻人，明显两者都占了。年纪轻轻，成就不俗，让韩玉树都觉得匪夷所思，约莫还不到半百岁数，不但就在自己眼皮子底下，得了最强二字的武运馈赠，还精通符箓，不是简单一个登堂入室就可以形容的，竟然能够让女儿韩绛树着了道，只可惜韩玉树始终不知双方交手的细节，更不清楚那姜尚真有无出手，如果此人是事先设伏，布置了阵法，引诱韩绛树主动投身山水禁制小天地，倒好了，可若是两人狭路相逢，一言不合就捉对厮杀起来，那么这个年轻晚辈，确实有单枪匹马横行一洲的本钱。
        而姜尚真之所以当下显得如此镇定自若，袖手旁观，任由年轻人与一位仙人对峙，只有一种可能，姜尚真先前已经对绛树出手，终究有那仗势欺人的嫌疑，因为无论是身份，还是境界，更别提厮杀本事，绛树远远无法跟姜尚真媲美，事实上，韩玉树都不认为自己能够与姜尚真掰手腕，去分什么胜负生死。
        桐叶洲修士，要论战功大小，姜尚真稳坐第一把交椅，而且第二把交椅的位置，离着姜尚真还不近。
      </div>
    )
  }

  // 弹出模态框
  showAlert () {
    const alertInstance = Modal.alert('用户协议', this.modalDom() , [
      { text: '同意', onPress: () => this.setState({flag:true}),style:{fontSize:"18px",height:"35px",lineHeight:"35px"} },
    ])
    setTimeout(() => {
      alertInstance.close();    //模态框自动消失
    }, 50000);
  }

  // 登录事件
  login (e) {
    this.setState({isLogin: !this.state.isLogin}) //用户信息输入正确时执行
  }
  render() {
    const { flag, isLogin } = this.state
    return (
      <div className="login_container">
        <div className="box">
        <header>
          <img src="/images/user/login/cuo.png" alt="" onClick={()=>{this.props.history.replace('/users')}}/>
        </header>
        <div className="content">
          <p>账号密码登录</p>
          <div className="input">
            <div>
              <input type="text" name="text" placeholder="手机号/会员名/昵称/邮箱" onChange={this.change.bind(this)} />
            </div>
            <div>
            <input type="password"  name="password" placeholder="密码" onChange={ this.change } />
            </div>
          </div>
          <div className="clause">
            <input type="checkbox" checked={ flag } onChange={ () => this.setState({flag:!flag})} />
            <p>
              未注册途友旅游账号的手机号，登录时将自动注册，是否同意
              <span onClick={this.showAlert.bind(this)} >《用户协议》</span>
              和
              <span onClick={this.showAlert.bind(this)} >《隐私保护》</span>
            </p>
          </div>
          <Button
            disabled={!flag}
            loading={ isLogin }
            style={{backgroundColor:"#3cd578",color:"#ffffff",width:"3.095rem",height:".435rem",borderRadius:".2175rem",margin:".265rem 0 .21rem 0"}}
            onClick={ this.login.bind(this) }
          >登录</Button>
          <div style={{display:"flex",justifyContent:"space-between",fontSize: "14px",color: "#999999",width:"3.095rem"}}>
            <NavLink to="/login"><span>验证码登录</span></NavLink>
            <span>忘记密码？</span>
          </div>
        </div>
        </div>
        <footer className="login_mode">
          <img src="/images/login/QQ .png" alt="" style={{width:".41rem",height:".41rem"}} />
          <img src="/images/login/weixindenglu.png" alt="" style={{width:"1.165rem",height:".4rem"}} />
          <img src="/images/login/weibo.png" alt="" style={{width:".41rem",height:".41rem"}} />
        </footer>
      </div>
    );
  }
}

export default Com
